import Draggable from "vuedraggable"
import { deepCopy, getComponentByKey, getParentChildrenByKey } from "../../lib/utils"
import EventBus from "../../EventBus"
import "./index.less"

export default {
  name: "Layer",
  data() {
    return {
      list: [],
      title: ""
    }
  },
  created(){
    EventBus.$oneOn("canvasComponentListChange", data=> {
      this.list = deepCopy(data)
    })
  },
  computed: {
    multipleKeys(){
      // return this.$store.state.lowCode.selectedComponent.key
      return this.$store.state.lowCode.multipleKeys
    },
    renderList(){
      const {
        list,
        title,
        filterTitle
      } = this
      return filterTitle(list, title)
    }
  },
  methods: {
    handleChange(event){
      const {
        componentKey
      } = event.item.dataset
      const {parent, index} = getParentChildrenByKey(this.list, componentKey)
      const newItem = deepCopy(parent[event.newDraggableIndex])
      parent[event.newDraggableIndex] = parent[index]
      parent[index] = newItem
      EventBus.$emit("setSelectComponentUpdateList", {type: 2, data:deepCopy(this.renderList)})
    },
    handleClick(component){
      console.log(component)
      // const index = this.list.findIndex(item => item.key === key)

      EventBus.$emit("selectComponent", component.key)
    },
    handleEyeClick(component, event){
      event.preventDefault()
      event.stopPropagation()
      // component.isShow = !component.isShow
      EventBus.$emit("setComponentShow", {
        key: component.key,
        isShow: !component.isShow
      })
    },
    renderItem(item){
      const { multipleKeys, renderItem, handleClick,renderDraggable,handleEyeClick  } = this
      const {
        key,
        label,
        props,
        isShow,
        icon
      } = item
      const header = (data) => <div onClick={()=> handleClick(data)} class="title">
        <a-icon class="icon" type={data.icon} />
        <div class="text">{data.label}</div>
        <a-icon onClick={e=> handleEyeClick(data,e)} class="icon taggle-show" type={isShow ? "eye": "eye-invisible"} />
      </div>
      return (
        <div
          key={key}
          class={`item draggable ${multipleKeys.includes(key) ? "active" : ""}`}
          data-component-key={key}
          >
          {/* <template slot='header'>{header(item)}</template> */}
          {header(item)}
            {
              props.list && (
                <div class="content">
                  {
                    props.list.map(tab => (
                      <div class={`item tab ${tab.value === props.value ? "tab-active" : ""}`}>
                        <div class="title"><a-icon class="icon" type="tag" /><div class="text">{tab.label}</div></div>
                        <div class="content">{
                          renderDraggable(tab.children)
                        }</div>
                      </div>

                    ))
                  }
                </div>
              )
            }

        </div>
      )
    },
    renderDraggable(list){
      const {
        handleChange,
        handleChange2,
        filterTitle,
        title,
        handleSearch
      } = this
      return (
        <div class="layer-list">
          {/* <a-input-search placeholder="搜索标题" onSearch={handleSearch} /> */}
          <Draggable list={list} onUpdate={handleChange} draggable='.draggable'>
            {
              list.map(item => this.renderItem(item))
            }
          </Draggable>
        </div>
      )

    },
    filterTitle(list, title){
      console.log(title)
      return list.filter(item => (item.props.title || item.text || item.label).indexOf(title) > -1)
    },
    handleSearch(){

    },
    handleSearchChange(event){
      this.title = event.target.value
    }

  },
  components: {
    Draggable
  },
  render() {
    const {
      handleSearchChange,
      title,
      renderList
    } = this
    return (
      <div class="layer-container">
        <a-input value={title} placeholder="搜索标题" onChange={handleSearchChange} class="title-search">
          <a-icon slot="prefix" type="search" />
        </a-input>
        {
          this.renderDraggable(renderList)
        }
      </div>
    )
  }
}
